{extend name="base" /}

{block name="content"}
<form class="layui-form" action="" id="searchBox">
    <div class="layui-inline">
        <select name="game_id" id="game_id" lay-filter="game_id" lay-verify="required" lay-search="">
            <option value="">请选择游戏</option>
            {volist name="$game_data" id="vo"}
            <option value="{$vo.game_id}">{$vo.game_id}：{$vo.game_name}</option>
            {/volist}
        </select>
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" name="role_name" id="role_name" placeholder="角色名称">
    </div>
    <div class="layui-inline" style="width:300px;">
        <button class="layui-btn layui-btn-normal" id="search">搜索</button>
        <button class="layui-btn layui-btn-normal" id="refresh" style="margin-left:0px;">刷新</button>
        <button class="layui-btn layui-btn-normal" id="apply" style="margin-left:0px;">手动申请</button>
    </div>
</form>

<table id="tableBox" lay-filter="tableBox"></table>

<script type="text/html" id="statusTpl">
    {{#  if(d.status === '未查看'){ }}
    <span class="layui-bg-orange" val="{{ d.id }}" style="padding: 4px 6px;">{{ d.status }}</span>
    {{#  } else if(d.status === '已收录') { }}
    <span class="layui-bg-blue" val="{{ d.id }}" style="padding: 4px 6px;">{{ d.status }}</span>
    {{#  } else if(d.status === '已发放') { }}
    <span class="layui-bg-green" val="{{ d.id }}" style="padding: 4px 6px;">{{ d.status }}</span>
        {{#  if(d.message){ }}
        <span class="layui-bg-red message" style="padding: 4px 6px; cursor: pointer" message="{{ d.message }}">查看发放留言</span>
        {{#  } }}
    {{#  } else if(d.status === '被驳回') { }}
    <span val="{{ d.id }}" style="padding: 4px 6px;background: #777;color:#fff;">{{ d.status }}</span>
        {{#  if(d.reason){ }}
        <span class="layui-bg-red reason" style="padding: 4px 6px; cursor: pointer" reason="{{ d.reason }}">查看驳回原因</span>
        {{#  } }}
    {{#  } }}
</script>

<script type="text/html" id="remarkTpl">
    {{#  if(d.remark == ''){ }}
       <button class="layui-btn layui-btn-sm remark" id="{{ d.id }}">填写备注</button>
    {{#  } else { }}
        {{ d.remark }}
    {{#  } }}
</script>

{/block}

{block name="css"}
<style>
    .layui-layer-page .layui-layer-content {overflow: inherit;}
</style>
{/block}

{block name="js"}
<script>
    layui.use(['table', 'form', 'layer'], function(){
        var table = layui.table
            ,$ = layui.$
            ,layer = layui.layer
            ,load = layer.load()
            ,active = {
                reload: function (date) {
                    var jsonObj = {
                        "game_id": $('#game_id').val()
                        ,"role_name": $('#role_name').val()
                    };

                    table.reload('tableId', {
                        page: {curr: 1}
                        ,where: jsonObj
                        ,height: 'full-80'
                    })
                },
            };

        //表格初始化
        table.render({
            elem: '#tableBox'
            ,height: 'full-80'
            ,url: '{:url("RebateList/index")}'
            ,page: true
            ,limit:20
            ,limits:[20,40,60,80]
            ,loading:true
            ,id:'tableId'
            ,resize: true
            ,done: function (res, curr, count) {
                layer.close(load);
            }
            ,cols: [[
                {field:'apply_time', title: '申请时间', width: 170}
                ,{field:'game_id', title: '游戏ID', width: 80}
                ,{field:'game_name', title: '游戏名称', width: 130}
                ,{field:'server_name', title: '所在区服', width: 130}
                ,{field:'role_name', title: '角色名称', width: 150}
                ,{field:'role_id', title: '角色ID', width: 100}
                ,{field:'pay_money', title: '充值金额', width: 100, style:'background-color: #6495ed; color: #fff;'}
                ,{field:'pay_time', title: '充值时间', width: 140}
                ,{field:'pay_id', title: '充值订单号', width: 240}
                ,{field:'remark', title: '备注', width: 200, templet: '#remarkTpl'}
                ,{field:'status', title: '状态', templet: '#statusTpl', fixed: 'right'}
            ]]
        });

        $('#apply').click(function(){
            layer.open({
                type: 2
                ,title: '返利申请'
                ,area: ['1200px', '700px']
                ,offset: '60px'
                ,resize: true
                ,content: '{:url("RebateList/apply")}'
                ,cancel: function(){
                    window.location.reload();
                }
            });
            return false;
        })

        $('#refresh').click(function(){
            window.location.reload();
        })

        $('#search').on('click', function(){
            load = layer.load();
            active['reload'].call(this);
            return false;
        });

        $('body').on('click', '.message', function(){
            layer.open({
                type: 1
                ,title: false
                ,area: ['600px', '300px']
                ,shadeClose: true
                ,offset: '200px'
                ,content: '<div style="padding: 20px;">'+$(this).attr('message')+'<div>'
            });
        })
        $('body').on('click', '.reason', function(){
            layer.open({
                type: 1
                ,title: false
                ,area: ['600px', '300px']
                ,shadeClose: false
                ,offset: '200px'
                ,content: '<div style="padding: 20px;">'+$(this).attr('reason')+'<div>'
            });
        })
        $('body').on('click', '.remark', function(){
            var obj = $(this);
            layer.prompt({
                formType: 2,
                value: '',
                title: '请输入备注',
                offset: '200px',
                area: ['600px', '300px']
            }, function(value, index, elem){
                var load = layer.load();
                $.post('{:url("RebateList/remark")}',{id:obj.attr('id'), remark:value}, function(json){
                    layer.close(load);
                    if(json.code==0){
                        obj.after(json.data);
                        obj.remove();
                        layer.msg(json.msg, {icon: 1, time:3000});
                    }else{
                        layer.msg(json.msg, {icon: 0, time:3000});
                    }
                }, 'JSON');
                layer.close(index);
            });
        })
    });
</script>
{/block}